<template>
  <el-card>
    <div class="mt">
      <span class="title">文章类型：</span>
      <el-tag :type="currentIndex[0] == -1 ? 'primary' : 'info'" class="mr" @click="handleSelect(-1, 0, '')">全部</el-tag>
      <el-tag :type="currentIndex[0] == index ? 'primary' : 'info'" class="mr" v-for="(item, index) in typeList.type"
        :key="item" @click="handleSelect(index, 0, item)">{{ item }}</el-tag>
    </div>
    <div class="mt">
      <span class="title">重要程度：</span>
      <el-tag :type="currentIndex[1] == -1 ? 'primary' : 'info'" class="mr" @click="handleSelect(-1, 1, '')">全部</el-tag>
      <el-tag :type="currentIndex[1] == index ? 'primary' : 'info'" class="mr" v-for="(item, index) in typeList.important"
        :key="item" @click="handleSelect(index, 1, item)">{{ item }}</el-tag>
    </div>
    <div class="mt">
      <span class="title">发布渠道：</span>
      <el-tag :type="currentIndex[2] == -1 ? 'primary' : 'info'" class="mr" @click="handleSelect(-1, 2, '')">全部</el-tag>
      <el-tag :type="currentIndex[2] == index ? 'primary' : 'info'" class="mr" v-for="(item, index) in typeList.publish"
        :key="item" @click="handleSelect(index, 2, item)">{{ item }}</el-tag>
    </div>
    <el-divider />
    <div class="mt ">
      <span class="title">已选:</span>
      <el-tag disable-transitions type="success" class="mr" closable v-for="item in selectedList" :key="item"
        @close="handleClose(item.num)">{{ item.name }}</el-tag>
    </div>
  </el-card>
  <el-button type="primary" class="mt mb" @click="exportToHtml">导出富文本到HTML文件</el-button>
  <Editor v-model="editorContent" api-key="xvbamfm2vokka8qoim9r801qtdlldskjschd51yha7zhuusp" :init="{
    language: 'zh_CN',
    plugins: 'lists link image table code help wordcount'
  }" />
  <el-button type="primary" @click="handleSubmit" class="mt">提交文章内容</el-button>
</template>

<script setup lang="ts">
import Editor from '@tinymce/tinymce-vue'
import { typeListApi } from "@/api/document"
import { onMounted, ref } from "vue";

/**
 * 文章分类数据结构定义
 * type: 文章类型分类数组
 * important: 重要程度分类数组
 * publish: 发布渠道分类数组
 */
interface ListType {
  type: string[],
  important: string[],
  publish: string[]
}

/**
 * 用户选择的分类项数据结构
 * name: 分类项名称
 * num: 分类类型编号(0:文章类型,1:重要程度,2:发布渠道)
 */
interface SelectType {
  name: string,
  num: number
}

// 从API获取的文章分类列表数据
const typeList = ref<ListType>({ type: [], important: [], publish: [] })

onMounted(async () => {
  const { data } = await typeListApi();
  typeList.value = data
})

// 定义当前选中索引的数组，分别对应文章类型、重要程度和发布渠道的选中状态
// 数组元素说明: 
//   [0]: 文章类型选中项的索引(-1表示未选中)
//   [1]: 重要程度选中项的索引
//   [2]: 发布渠道选中项的索引
const currentIndex = ref([-1, -1, -1])

// 已选中的分类项列表，存储用户选择的分类信息
// 数据结构示例: [{name:"招商类",num:0},{name:"高",num:1}]
const selectedList = ref<SelectType[]>([])  

/**
 * 处理分类选择逻辑
 * @param index 当前点击项的索引
 * @param num 分类类型编号(0/1/2)
 * @param name 分类项名称(空字符串表示"全部")
 */
const handleSelect = (index: number, num: number, name: string) => {
  // 查找当前分类类型是否已存在选中项
  const ind: number = selectedList.value.findIndex((item: SelectType) => item.num === num)
  
  // 处理"全部"选项
  if (!name) { 
    selectedList.value = selectedList.value.filter((item: SelectType) => item.num != num)
  } else {
    // 新增或更新选中项
    if (ind == -1) {
      selectedList.value.push({ name, num })
    } else {
      selectedList.value[ind] = { name, num }
    }
  }
  
  // 更新当前分类的选中状态索引
  currentIndex.value[num] = index

}

/**
 * 关闭已选标签的处理
 * @param num 要关闭的分类类型编号
 */
const handleClose = (num: number) => {
  selectedList.value = selectedList.value.filter((item: SelectType) => item.num != num);
  currentIndex.value[num] = -1
}

const editorContent = ref("");
const exportToHtml = () => {
  const blob = new Blob([editorContent.value], { type: "text/html" })
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "documnet.html";
  link.click();
  URL.revokeObjectURL(link.href)
}

const handleSubmit = () => {
  console.log(selectedList.value.map(item => item.name))
}

</script>

<style lang="less" scoped>
.title {
  display: inline-block;
  width: 80px;
  font-size: 14px;
}

.el-tag {
  cursor: pointer;
}

.mt {
  margin-top: 10px;
}

.mr {
  margin-right: 10px;
  margin-left: 10px;
}

.mb {
  margin-bottom: 10px;
}
</style>